<template >
  <div style="height: 100%">
    <div class="sm-box">
      <div style="display: flex;margin-left: 5px;padding-top: 10px  ">
        <i class="icon-mingxitiaozhang" style="margin-top: 5px"></i>
        <a @click="backFirst" href="#"><h3>&nbsp;&nbsp;客户调账/调票管理</h3></a>
        <span style="color: #ff3526;display: block;margin-top: 2px">&nbsp;(点击左边箭头可查看客户详情)</span>
      </div>
      <div  style="background-color: #f2f2f2;height: 600px;margin-right: 15px;border-radius: 10px">
        <div style="float: right;margin-bottom: 5px;margin-right: 20px;margin-top: 5px">
          <el-select v-model="groupId" style="width: 150px" placeholder="请选择">
            <el-option
              v-for="item in groupList"
              :key="item.groupClientId"
              :label="item.groupClientName"
              :value="item.groupClientId">
            </el-option>
          </el-select>
          <el-input placeholder="请输入客户姓名" style="width: 220px"  v-model="searchMsg" class="input-with-select">
            <el-button slot="append" @click="changeSerachMsg" class="el-icon-search"  style="background-color: #34a89b;color: white;font-weight: bold;font-size: 15px" ></el-button>
          </el-input>
        </div>
        <div style="height: 545px">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="clientList"
          height="489"
          style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"  inline class="demo-table-expand">
                <el-form-item label="客户名称">
                  <span>{{ props.row.client_name }}</span>
                </el-form-item>
                <el-form-item label="注册时间">
                  <span>{{props.row.signup_time.replace('T','  ')}}</span>
                </el-form-item>
                <el-form-item label="客户 ID">
                  <span>{{ props.row.client_id }}</span>
                </el-form-item>
                <el-form-item label="电话">
                  <span>{{ props.row.phone }}</span>
                </el-form-item>
                <el-form-item label="地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="qq">
                  <span>{{ props.row.qq }}</span>
                </el-form-item>
                <el-form-item label="备注">
                  <span>{{ props.row.remark }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ props.row.email }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="客户名称"
            width="240"
            prop="client_name">
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 16px" >{{ scope.row.client_name }}</span>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="客户组"
            width="120"
            >
            <template slot-scope="scope">
              <el-tag > <span >{{ scope.row.group_client_name }}</span></el-tag>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="销售欠款"
            width="200"
            >
            <template slot-scope="scope">
            <span >{{ scope.row.debt }}</span> <span>元</span>
          </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="未开票金额"
            width="200"
          >
            <template slot-scope="scope">
              <span  >{{ scope.row.invoice }}</span> <span>元</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="交易往来查询"
            width="150"
          >
            <template slot-scope="scope">
              <el-button icon="icon-jiaoyichaxun"   size="small"></el-button>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="操作方式 "
            width="317"
            >
            <template slot-scope="scope">
              <el-button  style="font-weight: bold;font-size: 16px" @click="choseClientReconciliation(scope.row.client_id,scope.row.client_name)" type="success" size="small" icon="el-icon-edit"  >调账</el-button>
              <el-button  @click="choseClientTiaoPiao(scope.row.client_id,scope.row.client_name)" style="font-weight: bold;font-size: 16px" type="danger" size="small" icon="el-icon-edit" >调票</el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <el-pagination
          style="margin-top: 10px;text-align: center"
          background
          :page-size="pageSize"
          :current-page="currentPage"
          layout="prev, pager, next"
          @current-change="changePage"
          :total=total>
        </el-pagination>
      </div>
      <el-dialog
        title="注意事项"
        :visible.sync="centerDialogVisible"
        width="36%"
        center>
        <div style="display:flex;flex-direction: column">

          <span style="font-size: 16px;font-weight: bold;color: #ff3526">调账后客户所有订单状态都将变为已结算，欠款直接记入客户总欠款</span>

          <span style="display: block;margin-top: 10px;font-weight: bold;font-size: 16px;width: 100%;text-align: center">当前需要调账的用户为:&nbsp;&nbsp;<el-tag effect="dark" style="font-size: 16px;font-weight: bold">{{nowChoseClientName}}</el-tag></span>
        </div>

        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="insetClientReconciliation(nowChoseClientId)">确 定</el-button>
  </span>
      </el-dialog>
      <el-dialog
        title="添加客户调账信息"
        :visible.sync="centerDialogVisible2"
        width="28%"
      >
        <div style="display:flex;flex-direction: column;width: 100%">
          <span v-if="nowClient!=null" style="font-weight: bold;font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;调账客户: <el-tag  style="font-style: oblique" >{{nowClient.clientName}}</el-tag></span>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px"> &nbsp;&nbsp;&nbsp;原先销售欠款:</span>
            <span  style="font-weight: bold;font-size: 16px;color: #ff3526" v-if="nowClient!=null">{{nowClient.debt}} 元</span>
          </div>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px"> 调账后销售欠款:</span>
            <el-input clearable  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" size="small" style="width: 220px" v-model="postClientMsg.newDebt"> </el-input>
            <span style="font-weight: bold;font-size: 16px">元</span>
          </div>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;调账时间:</span>
            <el-date-picker
              v-model="postClientMsg.reconciliationTime"
              align="right"
              size="small"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经办人:</span>
            <el-tag type="danger">{{employeeName}}</el-tag>
          </div>
          <div style="margin-top: 20px;display: flex">
            <span style="font-weight: bold;font-size: 16px;display: block">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注:&nbsp;</span>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="postClientMsg.remark"
              style="width: 220px"
              :rows="3"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
    <el-button :loading="loading1" type="danger" @click="backNow" >重新填写</el-button>
    <el-button :loading="loading1" type="primary" @click="postReconciliation">确认添加</el-button>
  </span>
      </el-dialog>

      <el-dialog
        title="注意事项"
        :visible.sync="centerDialogVisible3"
        width="36%"
        center>
        <div style="display:flex;flex-direction: column">

          <span style="font-size: 16px;font-weight: bold;color: #ff3526">调票后客户所有订单状态都将变为已开票，欠票直接记入客户总欠票</span>

          <span style="display: block;margin-top: 10px;font-weight: bold;font-size: 16px;width: 100%;text-align: center">当前需要调账的客户为:&nbsp;&nbsp;<el-tag effect="dark" style="font-size: 16px;font-weight: bold">{{nowChoseClientName}}</el-tag></span>
        </div>

        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="insetClientTiaoPiao(nowChoseClientId)">确 定</el-button>
  </span>
      </el-dialog>
      <el-dialog
        title="添加客户调票信息"
        :visible.sync="centerDialogVisible4"
        width="28%"
      >
        <div style="display:flex;flex-direction: column;width: 100%">
          <span v-if="nowClient!=null" style="font-weight: bold;font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;调票客户: <el-tag  style="font-style: oblique" >{{nowClient.clientName}}</el-tag></span>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px"> &nbsp;&nbsp;&nbsp;原先销售开票:</span>
            <span  style="font-weight: bold;font-size: 16px;color: #ff3526" v-if="nowClient!=null">{{nowClient.invoice}} 元</span>
          </div>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px"> 调票后销售开票:</span>
            <el-input clearable  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" size="small" style="width: 220px" v-model="postClientMsg2.newInvoice"> </el-input>
            <span style="font-weight: bold;font-size: 16px">元</span>
          </div>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;调票时间:</span>
            <el-date-picker
              v-model="postClientMsg2.tiaoPiaoTime"
              align="right"
              size="small"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div style="margin-top: 20px">
            <span style="font-weight: bold;font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经办人:</span>
            <el-tag type="danger">{{employeeName}}</el-tag>
          </div>
          <div style="margin-top: 20px;display: flex">
            <span style="font-weight: bold;font-size: 16px;display: block">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注:&nbsp;</span>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="postClientMsg2.remark"
              style="width: 220px"
              :rows="3"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
    <el-button :loading="loading2" type="danger" @click="backNow2" >重新填写</el-button>
    <el-button :loading="loading2" type="primary" @click="postTiaoPiao" >确认添加</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>
<!--供应商管理-->
<script>
import {get, post} from "../../utils/request";
import {CLIENT_MANAGE} from "../../utils/basic-data";

export default {
  name: "ClientManage",
  data(){
    return {
      loading2:false,
      loading1:false,
      centerDialogVisible4:false,
      centerDialogVisible3:false,
      centerDialogVisible2:false,
      centerDialogVisible:false,
      loading:true,
      searchMsg:null,
      groupId:null,
      total:0,
      pageSize:CLIENT_MANAGE,
      currentPage:1,
      clientList:[],
      groupList:[],
      nowChoseClientId:null,
      nowChoseClientName:null,
      nowClient:null,
      postClientMsg:{
        clientId:null,
        newDebt:null,
        remark:null,
        reconciliationTime:null,
        oldDebt:null,

      },
      postClientMsg2:{
        clientId:null,
        newInvoice:null,
        remark:null,
        tiaoPiaoTime:null,
        oldInvoice:null,

      },

      employeeName:null,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

    }
  },
  mounted() {

    get("/api/v1/token/showRealName").then(resp=>{
      this.employeeName=resp.data
    })
    get('/api/v1/groupClient/showAll').then(resp=>{
      this.groupList=resp.data
      this.groupList.unshift({groupClientId:0,groupClientName:'所有分组'})
      this.groupId=0
    })

    get('/api/v1/client/pop/show',{now:this.currentPage,size:this.pageSize}).then(resp=>{
      this.clientList=resp.data.objectList
      this.total=resp.data.total
      this.currentPage=resp.data.currenPage

      this.loading=false
    })
  },
  methods:{
    postTiaoPiao(){
      this.loading2=true
      if (this.postClientMsg2.newInvoice===null){
        this.$message.error('请填写调票后销售开票');
        this.loading2=false
        return
      }
      if (this.postClientMsg2.tiaoPiaoTime===null){
        this.$message.error('调票时间不能为空');
        this.loading2=false
        return
      }
      post('/api/v1/post/tiaopiao/sale',this.postClientMsg2).then(resp=>{
        if (resp.data.code===1){
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.centerDialogVisible4=false
          this.backFirst();
        }else {
          this.$message.error(resp.data.msg)
        }

      }).catch(resp=>{
        this.$message.error("系统瘫痪啦，快找bug")
      })
      this.loading2=false

    },
    postReconciliation(){
      this.loading1=true
      if (this.postClientMsg.newDebt===null){
        this.$message.error('请填写调账后销售欠款');
        this.loading1=false
        return
      }
      if (this.postClientMsg.reconciliationTime===null){
        this.$message.error('调账时间不能为空');
        this.loading1=false

        return
      }
      post('/api/v1/post/reconciliation/sale',this.postClientMsg).then(resp=>{
        if (resp.data.code===1){
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.centerDialogVisible2=false
          this.backFirst();
        }else {
          this.$message.error(resp.data.msg)
        }

      }).catch(resp=>{
        this.$message.error("系统瘫痪啦，快找bug")
      })
      this.loading1=false

    },
    insetClientReconciliation(clientId){
       this.centerDialogVisible=false
      get('/api/v1/get/client/data',{clientId:clientId}).then(resp=>{
        this.nowClient=resp.data
        this.postClientMsg.clientId=this.nowClient.clientId
        this.postClientMsg.reconciliationTime=new Date()
        this.postClientMsg.oldDebt=this.nowClient.debt
        this.postClientMsg.newDebt=null
        this.centerDialogVisible2=true
      })

    },
    insetClientTiaoPiao(clientId){
      this.centerDialogVisible3=false
      get('/api/v1/get/client/data',{clientId:clientId}).then(resp=>{
        this.nowClient=resp.data
        this.postClientMsg2.clientId=this.nowClient.clientId
        this.postClientMsg2.tiaoPiaoTime=new Date()
        this.postClientMsg2.oldInvoice=this.nowClient.invoice
        this.postClientMsg2.newInvoice=null
        this.centerDialogVisible4=true
      })

    },
    backNow(){
      this.postClientMsg.newDebt=null
      this.postClientMsg.remark=null
      this.postClientMsg.reconciliationTime=new Date()
    },
    backNow2(){
      this.postClientMsg2.newInvoice=null
      this.postClientMsg2.remark=null
      this.postClientMsg2.tiaoPiaoTime=new Date()
    },
    choseClientReconciliation(clientId,clientName){
      this.nowChoseClientId=clientId
      this.nowChoseClientName=clientName
      this.centerDialogVisible=true

    },
    choseClientTiaoPiao(clientId,clientName){
      this.nowChoseClientId=clientId
      this.nowChoseClientName=clientName
      this.centerDialogVisible3=true
    },
    backFirst(){
      this.searchMsg=null;
      this.groupId=0;
      this.changeSerachMsg()
    },
    checkTrade(value){
      console.log(value)
    },
    changeSerachMsg(){
      this.loading=true
      this.currentPage=1
      get('/api/v1/client/pop/show',{now:this.currentPage,size:this.pageSize,searchMsg:this.searchMsg,groupId:this.groupId}).then(resp=>{
        this.clientList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    },

    changePage(value){
      this.loading=true
      get('/api/v1/client/pop/show',{now:value,size:this.pageSize,searchMsg:this.searchMsg,groupId:this.groupId}).then(resp=>{
        this.clientList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    },

  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}
.demo-table-expand {
  font-size: 0;
  margin-left: 200px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.sm-box{
  padding-left: 15px;
  height: 674px;
  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}

</style>
